<template>
	<view class="detail">
		<view class="status-header">
			<view class="status-tips">{{detail.status_text}}</view>
			<view class="status-time" v-if="detail.end_time">剩余时间：{{detail.end_time}}</view>
		</view>
		
		
		<view class="info">
			<view class="uni-card">
				<view class="uni-card-header">退款信息</view>
				<view class="uni-card-content">
					<view class="uni-card-content-inner">
						<view class="goods">
							<view class="goods-info">
								<view class="goods-img">
									<image :src="detail.original_image" mode=""></image>
									
								</view>
								<view class="goods-name">{{detail.goods_name}}</view>
								<view class="spec-name">{{detail.spec_name}}</view>
							</view>
						</view>
						<view class="detail-info">
							<view v-if="detail.goods_status">货物状态：{{detail.goods_status}}</view>
							<view v-if="detail.return_reason">退款原因：{{detail.return_reason}}</view>
							<view v-if="detail.exchange_reason">换货原因：{{detail.exchange_reason}}</view>
							<view v-if="detail.amount">退款金额：{{detail.amount}}</view>
							<view v-if="detail.content">申请说明：{{detail.content}}</view>
							<view v-if="detail.create_time">申请时间：{{detail.create_time}}</view>
							<view v-if="detail.shipping_name">快递公司：{{detail.shipping_name}}</view>
							<view v-if="detail.shipping_no">快递单号：{{detail.shipping_no}}</view>
						</view>
					</view>
				</view>
				<view class="uni-card-footer">
					<view class="status">
						<view class="iconfont icon-tuikuantuihuo" v-if="detail.type == 1"></view>
						<view class="iconfont icon-servicewuyoutuihuanhuo1" v-if="detail.type == 2"></view>
						<view class="iconfont icon-quannianbaohuan" v-if="detail.type == 3"></view>
						 <view>{{detail.type_text}} {{detail.status_text}}</view>
					</view>
				</view>
				
				<view class="uni-card-footer">
					<view class="btn" @tap="cancel(detail)" v-if="detail.status != 0 && detail.status != 2">撤销申请</view>
					<view class="btn" @tap="apply_service(detail)" v-if="detail.status == 3">申请客服介入</view>
					
				</view>
			</view>
			
		</view>

		<view class="history">
			<view class="uni-card">
				<view class="uni-card-header">协商详情</view>
				<view class="uni-card-content">
					<view class="uni-card-content-inner" v-for="(item, index) in detail.item" :key="index">
						<view>{{item.role}}</view>
						<view>{{item.create_time}}</view>
						<view>【标题】{{item.title}}</view>
						<view>【内容】{{item.content}}</view>
					</view>
				</view>
				
			</view>	
		</view>
	</view>
</template>

<script>
	import Request from '../../common/request.js';
	
	export default {
		data() {
			return {
				get_datas: {},
				detail:'',
			};
		},
		onLoad(e) {
			this.get_datas = e;
			this.get_detail();
		}, 
		methods: {
			//获取售后详情
			get_detail: function(){
			    
			   	var that = this;	
				Request.send({
					url: 'after_sales/detail',
					data: {id: that.get_datas.id},
					sCallback: function(res) {
						that.detail = res.data;
					}
				})
			},
			//取消售后申请
            cancel: function(item) {
			     var that = this;
			    uni.showModal({
			    	title:'提示',
			    	content: '确定撤销该申请吗？',
			    	success(e) {
			    		if(e.confirm == 1) {
			    			Request.send({
			    				url: 'after_sales/cancel',
			    				data: {id: item.id},
			    				sCallback: function(res) {
			    					item.status == 0;
			    					Request.alert(res.msg)
			    				}
			    			})
			    		}
			    	}
			    })
            },
            //申请客服介入
            apply_service: function(item) {
			    var that = this;
				 var that = this;
				uni.showModal({
					title:'提示',
					content: '确定申请客服介入吗？',
					success(e) {
						if(e.confirm == 1) {
							Request.send({
								url: 'after_sales/applyService',
								data: {id: item.id},
								sCallback: function(res) {
									that.get_detail();
								}
							})
						}
					}
				})
			    
            },
            //修改申请
            edit: function(item) {
				uni.navigateTo({
					url: '/pages/aftersales/apply?after_id='+item.id+'&after_type='+item.type
				})
            	
            }
		}
	}
</script>

<style>
	.status-header{
		padding: 40px;
		background: #e60012;
		color:#fff;
		line-height: 60px;
		border-top: 1upx solid #fff;
	}
	
	.goods-info{
		display: flex;
		flex-direction: row;
		
		background: #fff;
		
	}
	
	.goods-info .goods-img image{
		width: 120upx;
		height: 120upx;
	}
	
	.goods-info .goods-name{
		color: #666;
		padding-left: 20upx;
	}
	
	.status{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.status .iconfont{
		color: #e60012;
		margin-right: 10upx;
		font-size: 50upx;
		
	}
	
	.uni-card-footer{
		justify-content: flex-end;
	}
	
	.btn{
		border: 1upx solid #E60012;
		color: #e60012;
		margin-left: 20upx;
		padding: 0 20upx;
		border-radius: 10upx;
	}
</style>
